<template>
  <n-form ref="formRef" :model="model" :rules="rules">
    <n-form-item path="email" label="邮箱">
      <n-input v-model:value="model.email" @keydown.enter.prevent />
    </n-form-item>

    <n-form-item path="username" label="用户名">
      <n-input v-model:value="model.username" @keydown.enter.prevent />
    </n-form-item>

    <n-form-item path="password" label="密码">
      <n-input
        v-model:value="model.password"
        type="password"
        @input="handlePasswordInput"
        @keydown.enter.prevent
        show-password-on="click"
      />
    </n-form-item>
    <n-form-item
      ref="rPasswordFormItemRef"
      first
      path="reenteredPassword"
      label="重复密码"
    >
      <n-input
        v-model:value="model.reenteredPassword"
        :disabled="!model.password"
        type="password"
        @keydown.enter.prevent
      />
    </n-form-item>
    <n-row :gutter="[0, 24]">
      <n-col :span="24">
        <div style="display: flex; justify-content: flex-end">
        <n-button
        :disabled="remainingTime > 0"
        round
        type="primary"
        @click="handleValidateButtonClick"
        >
          {{ remainingTime > 0 ? `等待 ${remainingTime} 秒` : '发送验证码' }}
        </n-button>
        </div>
      </n-col>
    </n-row>
  </n-form>
</template>

<script lang="ts" setup>
import { ref} from 'vue';
import { FormInst, FormItemInst, FormItemRule, useMessage, FormRules } from 'naive-ui';
import {formData}  from './store';
import { useUserStore } from '@/store/modules/user';
import { ResultEnum, ipAddress } from '@/enums/httpEnum';
const emit = defineEmits(['nextStep']);
const remainingTime = ref(0);

interface ModelType {
  email: string | null;
  username: string | null;
  password: string | null;
  reenteredPassword: string | null;
}

const formRef = ref<FormInst | null>(null);
const rPasswordFormItemRef = ref<FormItemInst | null>(null);
const message = useMessage();
const model = ref<ModelType>({
  email: formData.value.email,
  username: formData.value.username,
  password: formData.value.password,
  reenteredPassword: formData.value.password
});
const userStore = useUserStore();


function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
  return (
    !!model.value.password &&
    model.value.password.startsWith(value) &&
    model.value.password.length >= value.length
  );
}

function validatePasswordSame(rule: FormItemRule, value: string): boolean {
  return value === model.value.password;
}


const rules: FormRules = {
  email: [
  {
    required: true,
    validator(rule: FormItemRule, value: string) {
      if (!value) {
        return new Error('请输入邮箱');
      } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
        return new Error('请输入有效的邮箱地址');
      }
      return true;
    },
    trigger: ['input', 'blur']
  }
],
  username: [
    {
      required: true,
      message: '请输入用户名',
      trigger: ['input', 'blur']
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码'
    }
  ],
  reenteredPassword: [
    {
      required: true,
      message: '请再次输入密码',
      trigger: ['input', 'blur']
    },
    {
      validator: validatePasswordStartWith,
      message: '两次密码输入不一致',
      trigger: 'input'
    },
    {
      validator: validatePasswordSame,
      message: '两次密码输入不一致',
      trigger: ['blur', 'password-input']
    }
  ]
};

function handlePasswordInput() {
  if (model.value.reenteredPassword) {
    rPasswordFormItemRef.value?.validate({ trigger: 'password-input' });
  }
}
function handleValidateButtonClick() {
    if (remainingTime.value === 0) {

        remainingTime.value = 60;
        const timer = setInterval(() => {
            remainingTime.value -= 1;
            if (remainingTime.value === 0) {
                clearInterval(timer);
            }
        }, 1000);

        sendVerificationCode()
            .then((result) => {
                if (result === 1) {
                    message.success('发送成功！请注意查收');
                }
            })
            .catch((error) => {
                remainingTime.value =0;
            });
    }
}


async function sendVerificationCode() {
    return new Promise((resolve, reject) => {
        formData.value.email = model.value.email;
        formData.value.username = model.value.username;
        formData.value.password = model.value.password;
        formData.value.code = null;

        formRef.value?.validate(async (errors) => {
            if (!errors) {
                const { code, msg } = await userStore.register(formData.value);
                var matchedName = ipAddress[msg];
                if (code === ResultEnum.SUCCESS) {
                  message.success('访问'+matchedName+'的接口中');
                    emit('nextStep');
                    message.success('请及时查看您的邮箱');
                    resolve(1);
                } else {
                    message.info(msg);
                    reject(0);
                }
            } else {
                message.error('验证失败');
                reject(0);
            }
        });
    });
}
</script>
